/*
    2023/3/2
    产品列表页面（具体如何布局：一个排序行、一个数据显示行、一个分页行。共三个div）

    
    2023/3/3
    添加了头、导航、底部等组件及样式
    排序
 */
<template>
    <div>
        <!--头部区域-->
        <PageHeader />

        <!--导航区域-->
        <PageNav />

        <!--内容区域-->
        <div class="list">
            <div class="box">
                <div class="detail">
                    <!--左边显示分类---->
                    <div>左侧分类</div>

                    <!--右侧列表-->
                    <div>
                        <div>
                            <el-button @click="eventSort('id', 'desc')">默认排序</el-button>
                            <el-button @click="eventSort('price', 'desc')">按价格排序<i :class="sort.sortIcon"></i></el-button>
                            <el-button @click="eventSort('comment', 'desc')">按评价排序</el-button>
                        </div>
                        <div>
                            <el-row>
                                <el-col style="cursor:pointer;" :span="6" v-for="(o, index) in productData" :key="index">
                                    <el-card :body-style="{ padding: '0px' }" @click.native="eventTo(o)">
                                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                            class="image">
                                        <div style="padding: 14px;">
                                            <span>{{ o.name }} {{ o.code }}</span>
                                            <span style="color:red;"> {{ o.salePrice.toFixed(2) }}</span>
                                            <div class="bottom clearfix">
                                                <el-button type="text" class="button">操作按钮</el-button>
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>
                        <div>
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="pages.pageIndex" :page-sizes="[8, 12, 24, 100]" :page-size="pages.pageSize"
                                layout="total, sizes, prev, pager, next, jumper" :total="pages.total">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--底部区域-->
        <PageFooter />
    </div>
</template>

<script>

//引入组件页面
import PageNav from '@/components/PageNav.vue'
import PageHeader from '@/components/PageHeader.vue'
import PageFooter from '@/components/PageFooter.vue'

export default {

    components: {
        //声明刚才我们引入的页面，是一个组件
        PageNav, PageHeader, PageFooter
    },
    data() {
        return {
            productData: [],
            pages: {
                pageIndex: 1,
                pageSize: 8,
                total: 0
            },
            sort: {
                sortField: 'id',
                sortValue: 'desc',
                selectedValue: '',
                sortIcon: 'el-icon-bottom'
            }
        }
    },
    mounted() {
        this.loadData()
    },
    methods: {
        //排序按钮事件
        eventSort(sortField, sortValue) {

            this.sort.sortField = sortField
            //this.sort.sortValue = sortValue

            //是判断可以重复点击
            if (this.selectedValue == '') {
                this.sort.sortValue = sortValue
            }
            else {
                if (this.selectedValue == 'desc') {
                    this.sort.sortValue = 'asc'
                    this.sort.sortIcon='el-icon-top'
                }
                else {
                    this.sort.sortValue = 'desc'
                    this.sort.sortIcon='el-icon-bottom'
                }
            }
            this.selectedValue = this.sort.sortValue

            this.loadData()
        },
        //跳转到详情页
        eventTo(row) {
            //this.$message.error(id)
            this.$router.push('/product/detail?id='+row.id)

            //this.$router.push({ name: 'product/detail', params: { data: row } })
        },
        //加载产品列表数据
        loadData() {
            //let url = 'http://localhost:5217/product/pages?pageIndex='+ this.pages.pageIndex+'&pageSize='+this.pages.pageSize
            //let url = 'http://localhost:5217/product/pages'
            let url= this.$baseUrl + 'new/product/sku/pages'
            this.$http.get(url, {
                params: {
                    pageIndex: this.pages.pageIndex,
                    pageSize: this.pages.pageSize,
                    sortField: this.sort.sortField,
                    sortValue: this.sort.sortValue
                }
            }).then(res => {
                this.productData = res.data.data.items
                this.pages.total = res.data.data.total
            })
        },
        handleSizeChange(val) {
            this.pages.pageSize = val
            this.loadData()
        },
        handleCurrentChange(val) {
            this.pages.pageIndex = val
            this.loadData()
        }
    }
}
</script>

<style></style> 